<template>
  <!--首页-->
  <div>
    <div class="header">
      <ul>
        <li>
          <router-link to="/ziliao" tag="p">
            <img src="../../assets/userhead.png" alt="" width="60" v-if="userhead==''">
            <img :src="userhead | imgPathFilter" alt="" width="70" height="65" v-else>
          </router-link>
        </li>
        <li>{{airport.airportName}}-{{employee.employeeName}}</li>
      </ul>
      <wv-button type="default" :mini="true" @click="isVisible=true">
        <img src="../../assets/tuichu.png" alt="" width="13">退出
      </wv-button>
    </div>
    <ul class="lists">
      <router-link to="/shoukuan" tag="li">
        <p><img src="../../assets/load.png" alt="" height="27"></p>
        <p>收款确认</p>

      </router-link>
      <router-link to="/useyanzheng" tag="li" class="bg1">
        <p><img src="../../assets/yanzheng.png" alt="" height="28"></p>
        <p>使用验证</p>
      </router-link>
      <router-link to="/zhuanshuerweima" tag="li">
        <p><img src="../../assets/erweima.png" alt="" height="25"></p>
        <p>专属二维码</p>
      </router-link>
    </ul>
    <ul class="lists">
      <router-link to="/cunkuan" tag="li" class="bg1">
        <p><img src="../../assets/cunkuan.png" alt="" height="25"></p>
        <p>现金存款</p>
      </router-link>

      <router-link to="/myyeji" tag="li" v-if="employee.employeePosition=='manager'">
        <p><img src="../../assets/cup.png" alt="" height="25"></p>
        <p>我的业绩</p>
      </router-link>
      <!--分经理和员工-->
      <router-link to="/yuangong" tag="li" v-if="employee.employeePosition=='employee'">
        <p><img src="../../assets/cup.png" alt="" height="25"></p>
        <p>我的业绩</p>
      </router-link>

      <router-link to="/jinglihuiyuan" tag="li" class="bg1" v-if="employee.employeePosition=='manager'">
        <p><img src="../../assets/huiyuan.png" alt="" height="25"></p>
        <p>我的会员</p>
      </router-link>
      <!--分经理和员工-->
      <router-link to="/yuangonghuiyuan" tag="li" class="bg1" v-if="employee.employeePosition=='employee'">
        <p><img src="../../assets/huiyuan.png" alt="" height="25"></p>
        <p>我的会员</p>
      </router-link>
    </ul>
    <ul class="lists">
      <router-link :to="{path:'addhuiyuan',query:{type:1}}" tag="li">
        <p><img src="../../assets/addhuiyuan.png" alt="" height="30"></p>
        <p>新增会员</p>
      </router-link>
      <router-link tag="li" to="" class="bg1" v-if="employee.employeePosition=='employee'">
      </router-link>
      <router-link tag="li" to="" v-if="employee.employeePosition=='employee'">
      </router-link>
      <router-link to="/tuika" tag="li" class="bg1" v-if="employee.employeePosition=='manager'">
        <p><img src="../../assets/tuika.png" alt="" height="26"></p>
        <p>退卡工单</p>
      </router-link>
      <router-link to="/myyuangong" tag="li" v-if="employee.employeePosition=='manager'">
        <p><img src="../../assets/yuangong.png" alt="" height="26"></p>
        <p>我的员工</p>
      </router-link>
    </ul>
    <div class="model" v-show="isVisible">
      <div class="bg"></div>
      <div class="modelContent">
        <img src="../../assets/close.png" alt="" width="15" @click="isVisible=false">
        是否退出此次登录
        <p class="btn">
          <button @click="isVisible=false">取消</button>
          <button @click="isVisible=false,goSignOut()">确定退出</button>
        </p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {getuserInfo, employeeAppVersion} from '../../../test/unit/http'
  import global from '../../../test/unit/global'
  import {Toast} from 'we-vue'

  export default {
    name: 'index',
    props: {},
    data() {
      return {
        isVisible: false,
        userhead: '',
        airport: {},
        employee: {}
      };
    },
    methods: {
      goSignOut() {
        window.localStorage.clear();
        this.$router.push({path: '/'})
      },
      getUserInfoData() {
        getuserInfo().then(res => {
          console.log(res);
          if (res.code == 100) {
            this.airport = res.object.airport;
            this.employee = res.object.employee;
            this.userhead = res.object.userhead;
          }
        })
      },
      checkUpdate() {
        plus.runtime.getProperty(plus.runtime.appid, function (wgtInfo) {
          console.log("wgtInfo版本信息version" + wgtInfo.version);
          let version = wgtInfo.version;
          employeeAppVersion({'versionCode': 'sijiguibin'}).then((res) => {
            if (res.code == 100) {
              let appPath = res.object.url;
              let versionNo = res.object.versionNo;
              if (version != versionNo && appPath) {
                plus.nativeUI.confirm("应用有新版本，是否立即下载更新？", function (event) {
                  if (event.index == 0) {
                    plus.nativeUI.showWaiting("下载更新文件中...");
                    plus.downloader.createDownload(appPath, {}, function (d, status) {
                      if (status == 200) { // 下载成功
                        let path = d.filename;
                        console.log(d.filename);
                        plus.runtime.install(path);
                      } else {
                        plus.nativeUI.alert("下载更新文件失败！");
                      }
                      plus.nativeUI.closeWaiting();
                    }).start();
                  }
                }, '更新程序', ['确认']);
              }
            }
          });
        });
      }
    },
    mounted() {
    },
    created() {
      this.getUserInfoData();
      this.checkUpdate();
    },
    components: {}
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .bg {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 50px;
  }

  .model .modelContent {

    background-color: #fff;
    border-radius: 8px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -43%;
    margin-top: -111px;
    z-index: 2;
    padding: 40px 10px 20px;
    width: 80%;

    img {
      position: absolute;
      right: 10px;
      top: 10px
    }

    .btn {
      text-align: center;

      button {
        height: 42px;
        line-height: 42px;
        color: #fff;
        outline: none;
        border: none;
        width: calc(50% - 20px);
        border-radius: 8px;
        margin-top: 25px;
      }

      button:last-child {
        background-color: #ccc;
        border: 1px solid #ccc;
      }

      button:first-child {
        background-color: #f98e3c;
        margin-right: 20px;

      }
    }

  }

  .header {
    background: url("../../assets/indexbanner.png") no-repeat;
    background-size: 100% 100%;
    font-size: 15px;
    color: #fff;
    padding: 20px 0;
    position: relative;

    li:last-child {
      margin-bottom: 5px;
    }

    p {
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.4);
      padding: 5px;
      width: 66px;
      height: 66px;
      margin: 0 auto 10px;

      img {
        border-radius: 50%;
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
      }
    }

    button {
      border-radius: 25px;
      color: #f88d3b;
      position: absolute;
      top: 10px;
      right: 10px;

      img {
        vertical-align: sub;
        margin-right: 5px;
      }
    }
  }

  .lists {
    display: flex;

    li {
      flex: 1;
      padding: 25px 0;
      border-bottom: 1px solid #ddd;

      p:first-child {
        height: 30px;
        margin-bottom: 10px;
      }
    }

    li:first-child, li:nth-child(2) {
      border-right: 1px solid #ddd;
    }

    .bg1 {
      background-color: #fafcfa;
    }
  }
</style>
